<template>
  <div class="shop">
    <div class="box">
      <h2>饿了么</h2>
      <input type="text" placeholder="输入商家, 商品名称" />
    </div>
    <div class="tupian">
      <img v-for="(item, index) in list" :key="index" :src="item.pic" alt="" />
    </div>
    <h3>猜你喜欢</h3>
    <div class="span">
      <p>综合排序</p>
      <p @click="yuanjin">距离最近</p>
      <p @click="liang">销量最高</p>
      <p>筛选</p>
      <div>
        <span v-for="(item, index) in shangping" :key="index">{{
          item.ping
        }}</span>
      </div>
    </div>
    <div class="one" v-for="(item, index) in shuju" :key="index">
      <div class="img">
        <img :src="item.picUrl" alt="" />
      </div>
      <div class="right">
        <p>{{ item.name }}</p>
        <p>{{ item.monthSalesTip }}</p>
        <p>距离：{{ item.distance }}</p>
        <p>{{ item.averagePriceTip }}元</p>
      </div>
    </div>
  </div>
</template>

<script>
import { a } from "@/api";
import tu from "../assets/3.png";

export default {
  data() {
    return {
      xiabiao: 0,
      shangping: [
        { ping: "年货节热卖" },
        { ping: "津贴联盟" },
        { ping: "满减优惠" },
        { ping: "品质联盟" },
      ],
      shuju: [],
      list: [{ pic: tu }],
      currentIndex: 0, //用来保存点击的下标
      tablist: [
        { icon: "icon-home", text: "首页" },
        { icon: "icon-order", text: "订单" },
        { icon: "icon-mine", text: "我的" },
      ],
    };
  },
  mounted() {
    a().then((res) => {
      console.log(res.data.list);
      this.shuju = res.data.list;
    });
  },
  methods: {
    yuanjin() {
      this.shuju.sort(function (a, b) {
        return a.wmPoiScore - b.wmPoiScore;
      });
    },
    liang() {
      this.shuju.sort(function (a, b) {
        return b.wmPoiScore - a.wmPoiScore;
      });
    },
  },
};
</script>

<style scoped>
.shop {
  padding: 10px;
  overflow: auto;
}
.span {
  display: flex;
  flex-wrap: wrap;
}
.span p {
  padding: 9px;
  margin: 10px;
}
.span span {
  padding: 5px;
  background: gray;
  margin: 8px;
}
.one {
  display: flex;
  margin-top: 10px;
  padding: 10px;
}
.img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
.img img {
  width: 100%;
  height: 100%;
}

.box {
  padding: 10px;
  background: rgb(79, 152, 255);
}
h2 {
  color: white;
  margin-bottom: 10px;
}
input {
  width: 100%;
  height: 30px;
  border: 1px solid white;
  border-radius: 20px;
  text-align: center;
}

.tupian {
  height: 100px;
  padding: 10px;
}
.tupian img {
  width: 100%;
  height: 100%;
}
</style>